<template>
  <div>
    <template v-if="props.progressType == 'step'"> 
      <el-steps finish-status="success" :active="currentStep?.step" align-center space="200px">
        <template v-for="(item,index) in stepList" :key="index">
            <el-step v-if="!item.hidden" :title="item.name"/>
        </template>
      </el-steps>
    </template>
    <template v-else>
      <div class="divCss">
        <div style="float: left;">
          <!-- 取消 -->
            <div v-if="newStep > 35" style="position: relative;font-weight: 600;">
              <img :src="imgUrl"
                style="margin-left: -20px;width:180px;height: 44px;filter:  hue-rotate(200deg);opacity: 0.3;">
              <span style="position: absolute; bottom: 15px; left: 20px;color: aliceblue; color: #FE7070 ; ">
                <el-button icon="CircleCloseFilled" link style="font-size: 14px;color: #FE7070;">
                  <span v-if="newStep == 35" style="margin-left: 10px;">已取消</span>
                  <span v-if="newStep == 40" style="margin-left: 10px;"> 待取消 </span>
                </el-button>
              </span>
              <span v-if="newStep == 35"
                style="position: absolute; bottom: 15px;  color: aliceblue; color: #FE7070 ;font-size: 12px; min-width: 500px;padding-left:20px;">
                <el-button icon="Warning" link style="margin-left: 5px;font-size: 15px;color: #FE7070;">
                  取消原因：由 {{ userRoleName }} 取消
                </el-button>
              </span>
            </div>
            <!-- 进度节点11 -->
            <template v-else>
              <!-- {{ stepList}} -->
              <span class="span-box" v-for="(item,index) in stepList" :key="index">
                <span v-if="item.state - 0 <= newStep && !item.hidden">
                  <img :src="item.state == 2 ? imgUrl : imgUrl2" >
                  <span>
                    <el-icon><SuccessFilled /></el-icon>
                    {{ item.step }} {{ item.name }}
                    <!-- <div style="display: inline;" v-if="item.returnedPay">{{ item.returnedPay}}</div> -->
                    <!-- <template v-if="item?.config">
                      <span style="left: 60px;">({{ item.config.packedQuantity  }}/{{ item.config.packingAllocationQuantity }})</span>
                    </template>
                    <template v-else-if="item?.configPay">
                      <span style="left: 80px;">({{ item.configPay.returnedPay  }}/{{item.configPay.returnedQuantity}})</span>
                    </template>                   -->
                  </span>
                </span>
                <span v-else-if="!item.hidden">
                  <img :src="item.state == 2 ? imgUrl : imgUrl2"
                    style="margin-left: -10px;width:120px;height: 44px;filter:brightness(20)">
                  <span style="color: #999999; ">
                    {{ item.step }} {{ item.name }}
                    <div style="height:8px">
                      <!-- <span>2024/02/02/08:16</span> -->
                    </div>
                  </span>
                </span>
              </span>
            </template>
        </div>
      </div>
  </template>
  </div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import imgUrl from '@/assets/images/progress.png'
import imgUrl2 from '@/assets/images/progress2.png'
import { useRoute } from 'vue-router'

const props = defineProps({
  // newStep: { //弃用
  //   type: Number,
  //   default: 0
  // },
  orderStatus: {
    type: Number,
    default: 0
  },
  payStatus: {
    type: Number,
    default: 0
  },
  userRole: {
    type: String,
    default: 'common'
  },
  invoiceStatus: {
    type: Number, // 发票状态 5-未申请 10-待开票 15-已开票
    default: 0
  },
  progressType: { // 1:step  0:Progress
    type: String,
    default: ''
  },
  returnedPay:{
    type: Number, // 0 未付 大于0已付
    default: 0
  },
  progressConfig: {
    type: Object,
    default: () => ({})
  }
})

const invoiceState = computed(() => {
  if (props.invoiceStatus == 5) {
    return '未申请'
  } else if (props.invoiceStatus == 10) {
    return '待开票'
  } else if (props.invoiceStatus == 15) {
    return '已开票'
  }
})

const userRoleName = computed(() => {
  const nameFilter = {
    'common': 'common',
    'boxOwnner': '集装箱公司企业',
    'boxAgent': '货代企业',
    'boxHuiDiao_boxOwnner': '集装箱公司企业',
    'boxHuiDiao_agent': '货代企业',
    'boxDeal_boxOwnner': '箱贸企业',
    'boxDeal_agent': '货代企业',
  }
  return nameFilter[props.userRole]
})

const currentStep =  computed(() =>{
  return data.value[props.userRole].find(item => item.state == props.orderStatus )
}) // 当前进度
// stepList 进步条
const stepList = computed(() => {
  return data.value[props.userRole] || []
})

onMounted(() => {
  sync28()
})

watch(() => props.orderStatus, () => {
  sync28()
})
const route = useRoute();

// when newVal 28/30, change name of step 07 
const sync28 = () => {
  const newVal = getNewStep(props.orderStatus, props.payStatus)
  const index1 = data.value.common.findIndex(item => item.step == '07')
  const index2 = data.value.boxOwnner.findIndex(item => item.step == '07')
  const index3 = data.value.boxHuiDiao_agent.findIndex(item => item.step == '07')

  if (newVal == 28) {
    data.value.common[index1] = { name: '已还未付', state: 28, step: '07' }
    // data.value.boxOwnner[index2] = { name: '已还未收', state: 28, step: '07' }
  }
  if (newVal == 30) {
    data.value.common[index1] = { name: '已还已付', state: 28, step: '07' }
    // data.value.boxOwnner[index2] = { name: '已还已收', state: 28, step: '07' }
  }
  if(userRoleName.value=='货代企业'){
    
  // console.log('userRoleName',userRoleName)
  // console.log('index3',index3) boxOwnerHuiDiaoOrderInfo agentHuiDiaoOrderInfo
     if(route.name=='agentHuiDiaoOrderInfo'){ //货代
    // { name: props.returnedPay>0 ?'已还已收':'已还未收', state: 25, step: '07', orderStatus: 25, payStatus: 5,configPay: props.progressConfig },

         data.value.boxHuiDiao_agent[index3].name=props.returnedPay>0 ?'已还已收':'已还未收'
        }else if(route.name=='boxOwnerHuiDiaoOrderInfo'){//集装箱公司
          // param.tagName = 'rent'
          data.value.boxHuiDiao_agent[index3].name=props.returnedPay>0 ?'已还已付':'已还未付'

        }

  }
}

// orderStatus&&payStatus to step
const newStep = ref(0)
const getNewStep = (orderStatus: any, payStatus: any) => {
  if (orderStatus >= 35) {
    newStep.value = orderStatus
    return orderStatus
  }
  const item = stepList.value.find(item => {
    if (props.userRole == 'boxDeal_boxOwnner' || props.userRole == 'boxDeal_agent' || props.userRole == 'boxOwnner') {
      return item.orderStatus == props.orderStatus
    } else {
      return item.orderStatus == props.orderStatus && item.payStatus == payStatus
    }
  })

  if (item && item.state) {
    newStep.value = item.state
  } else {
    newStep.value = 2
  }
  return newStep.value
}

// step
// @2024/11/27 jcli
// 支付状态: payStatus  5 - 未付 10 - 支付中 15 - 已付
// 订单状态 status 2-待确认 3-待审核 5-已下单|待开提箱单 10-待提 15-已提 20-待还 25-已还 30-已完成 35-已取消 40-待取消
const data = ref({
  common: [
    { name: '待确认', state: 2, step: '01', orderStatus: 2, payStatus: 5 },
    { name: '待审核', state: 3, step: '02', orderStatus: 3, payStatus: 5 },
    { name: '待开提箱单', state: 5, step: '03', orderStatus: 5, payStatus: 5 },
    { name: '待提未付', state: 10, step: '04', orderStatus: 10, payStatus: 5 },
    { name: '待提已付', state: 10, step: '04', orderStatus: 10, payStatus: 15, hidden: true },
    { name: '已提未付', state: 15, step: '05', orderStatus: 15, payStatus: 5 },
    { name: '待还未付', state: 20, step: '06', orderStatus: 20, payStatus: 5 },
    { name: '待还已付', state: 25, step: '07', orderStatus: 20, payStatus: 15 },
    // { name: '已还未付', state: 28, step: '07', orderStatus: 25, payStatus: 5 },
    { name: '已完成', state: 30, step: '08', orderStatus: 30, payStatus: 15 },
    // { name: '已取消', state: 35, step: '07', orderStatus: 35, payStatus: 5 },
  ],
  boxOwnner: [
    { name: '待确认', state: 2, step: '01', orderStatus: 2, payStatus: 5 },
    { name: '待审核', state: 3, step: '02', orderStatus: 3, payStatus: 5 },
    { name: '待开提箱单', state: 5, step: '03', orderStatus: 5, payStatus: 5 },
    { name: props.payStatus==5 ?'待提未收':'待提已收', state: 10, step: '04', orderStatus: 10, payStatus: props.payStatus,},
    { name: props.payStatus==5 ?'已提未收':'已提已收', state: 15, step: '05', orderStatus: 15, payStatus: props.payStatus ,},
    { name: props.payStatus==5 ?'待还未收':'待还已收', state: 20, step: '06', orderStatus: 20, payStatus: props.payStatus ,},
    { name: props.payStatus==5 ?'已还未收':'已还已收', state: 25, step: '07', orderStatus: 25, payStatus: props.payStatus ,},
    // { name: '待提已收', state: 10, step: '04', orderStatus: 10, payStatus: 15, hidden: props.payStatus!=15 },
    // { name: '已提未收', state: 15, step: '05', orderStatus: 15, payStatus: 5 ,hidden: props.payStatus!=5},
    // { name: '已提已收', state: 15, step: '05', orderStatus: 15, payStatus: 15 ,hidden: props.payStatus!=15 },
    // { name: '已提', state: 15, step: '05', orderStatus: 15, payStatus:props.payStatus,returnedPay:props.returnedPay>0 ? '已收':'未收'},
    // { name: '待还未收', state: 20, step: '06', orderStatus: 20, payStatus: 5 },
    // { name: '已还已收', state: 25, step: '07', orderStatus: 20, payStatus: 15 },
    // { name: '已还未收', state: 28, step: '07' },
    { name: '已完成', state: 30, step: '08', orderStatus: 30, payStatus: 15 },
    // { name: '已取消', state: 35, step: '07' },
  ],
  boxAgent: [
    { name: '待确认', state: 2, step: '01', orderStatus: 2, payStatus: 5 },
    { name: '待审核', state: 3, step: '02', orderStatus: 3, payStatus: 5 },
    { name: '待开提箱单', state: 5, step: '03', orderStatus: 5, payStatus: 5 },
    { name: props.payStatus==5 ?'待提未付':'待提已付', state: 10, step: '04', orderStatus: 10, payStatus: props.payStatus,},
    { name: props.payStatus==5 ?'已提未付':'已提已付', state: 15, step: '05', orderStatus: 15, payStatus: props.payStatus ,},
    { name: props.payStatus==5 ?'待还未付':'待还已付', state: 20, step: '06', orderStatus: 20, payStatus: props.payStatus ,},
    { name: props.payStatus==5 ?'已还未付':'已还已付', state: 25, step: '07', orderStatus: 25, payStatus: props.payStatus ,},
    // { name: '已还未付', state: 28, step: '07' },
    { name: '已完成', state: 30, step: '08', orderStatus: 30, payStatus: 15 },
    // { name: '已取消', state: 35, step: '07' },
  ],
  boxHuiDiao_boxOwnner: [
    { name: '待确认', state: 2, step: '01', orderStatus: 2, payStatus: 5 },
    { name: '待审核', state: 3, step: '02', orderStatus: 3, payStatus: 5 },
    { name: '待开提箱单', state: 5, step: '03', orderStatus: 5, payStatus: 5 },
    { name: '待提', state: 10, step: '04', orderStatus: 10, payStatus: 5 },
    { name: '待提已收', state: 10, step: '04', orderStatus: 10, payStatus: 15, hidden: true },
    { name: '已提', state: 15, step: '05', orderStatus: 15, payStatus: 5 },
    { name: '待还', state: 20, step: '06', orderStatus: 20, payStatus: 5 },
    { name: '已还未收', state: 25, step: '07', orderStatus: 25, payStatus: 5 },
    { name: '已完成', state: 30, step: '08', orderStatus: 30, payStatus: 5 },
    // { name: '已取消', state: 35, step: '07' },
  ],
  boxHuiDiao_agent: [
    { name: '待确认', state: 2, step: '01', orderStatus: 2, payStatus: 5 },
    { name: '待签署', state: 3, step: '02', orderStatus: 3, payStatus: 5 },
    { name: '待开提箱单', state: 5, step: '03', orderStatus: 5, payStatus: 5 },
    { name: '待提', state: 10, step: '04', orderStatus: 10, payStatus: 5 },
    { name: '待提已收', state: 10, step: '04', orderStatus: 10, payStatus: 15, hidden: true },
    { name: '已提', state: 15, step: '05', orderStatus: 15, payStatus: 5,config: props.progressConfig },
    { name: '待还', state: 20, step: '06', orderStatus: 20, payStatus: 5 },
    { name: props.returnedPay>0 ?'已还已收':'已还未收', state: 25, step: '07', orderStatus: 25, payStatus: 5,configPay: props.progressConfig },
    { name: '已完成', state: 30, step: '08', orderStatus: 30, payStatus: 5 },
    // { name: '已取消', state: 35, step: '07' },
  ],
  boxDeal_agent: [ // 2-待确认 3-待审核 10-待开发票 15-未收 20-已收 25-待提 30-已提 35-已完成 40-已取消 45-待取消
    { name: '待确认', state: 2, step: '01', orderStatus: 2 },
    { name: '待审核', state: 3, step: '02', orderStatus: 3 },
    { name: '待申请发票', state: 10, step: '03', orderStatus: 10 },
    { name: '未付', state: 15, step: '04', orderStatus: 15 },
    { name: '已付', state: 20, step: '05', orderStatus: 20 },
    { name: '待提', state: 25, step: '06', orderStatus: 25 },
    { name: '已提', state: 30, step: '07', orderStatus: 30 },
    { name: '已完成', state: 35, step: '08', orderStatus: 35 },
    // { name: '待取消', state: 45, step: '09', orderStatus: 30, payStatus: 5 },
    // { name: '已取消', state: 40, step: '08', orderStatus: 30, payStatus: 5 },
  ],
  boxDeal_boxOwnner: [
    { name: '待确认', state: 2, step: '01', orderStatus: 2 },
    { name: '待审核', state: 3, step: '02', orderStatus: 3 },
    { name: '待开发票', state: 10, step: '03', orderStatus: 10 },
    { name: '未收', state: 15, step: '04', orderStatus: 15 },
    { name: '已收', state: 20, step: '05', orderStatus: 20 },
    { name: '待提', state: 25, step: '06', orderStatus: 25 },
    { name: '已提', state: 30, step: '07', orderStatus: 30 },
    { name: '已完成', state: 35, step: '08', orderStatus: 35 },
  ]
})


</script>
<style lang="scss" scoped>
.divCss {
  width: 100%;
  height: 44px;
  background-color: #fefefe;
  /* border: 0.1rem solid #e1e1e1; */
  overflow: hidden;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12),
    0 0 3px 0 rgba(0, 0, 0, 0.04);
  font-size: 12px;
}


.rowCss1 {
  /* background-color: green; */
}

.rowCss2 {
  background-color: green;
  color: #fff
}
.span-box{
  display: inline-block;
  position: relative;
  height: 44px;
  span {
    display:inline-block;
    height: 44px;
    line-height: 44px;
    img{
      margin-left: -20px;
      width:220px;
      height: 44px;
    }
    span{
      display: inline-block;
      position: absolute; 
      left: 20px;
      text-align: center;
      line-height: 44px;
      color: aliceblue;
      // width: 100%;
      // z-index: 1;
      span{
        position: absolute;
        left: 60px;
      }
    }
  }
}
</style>